// ////////////////////////////////////////////////////////////////////////////////
// // 1. 支持 ES Modules 的 import 声明
// ////////////////////////////////////////////////////////////////////////////////

// import createHeading from './heading.js'
// import better from './better.png'
// import './main.css'

// const heading = createHeading()
// const img = new Image()
// img.src = better
// document.body.append(heading)
// document.body.append(img)

// ////////////////////////////////////////////////////////////////////////////////
// // 2. 支持 CommonJS 的 require 函数
// ////////////////////////////////////////////////////////////////////////////////

// const createHeading = require('./heading.js').default
// const better = require('./better.png')
// require('./main.css')

// const heading = createHeading()
// const img = new Image()
// img.src = better
// document.body.append(heading)
// document.body.append(img)

// ////////////////////////////////////////////////////////////////////////////////
// // 3. 支持 AMD 的 require / define 函数
// ////////////////////////////////////////////////////////////////////////////////

// define(['./heading.js', './better.png', './main.css'], (createHeading, better) => {
//   const heading = createHeading.default()
//   const img = new Image()
//   img.src = better
//   document.body.append(heading)
//   document.body.append(img)
// })

// require(['./heading.js', './better.png', './main.css'], (createHeading, better) => {
//   const heading = createHeading.default()
//   const img = new Image()
//   img.src = better
//   document.body.append(heading)
//   document.body.append(img)
// })

////////////////////////////////////////////////////////////////////////////////
// 4. 部分 loader 加载的资源中一些用法也会触发资源模块加载
////////////////////////////////////////////////////////////////////////////////

// import './main.css'

// // html 文件会默认将 html 代码作为字符串导出，因此需要接收导出的 html 字符串
// // import './footer.html'
// import footerHtml from './footer.html'

// document.write(footerHtml)


/******************************** definePlugins ********************************/
// console.log(API_BASE_URL)

/******************************** Tree Shaking ********************************/
// import { Button } from './components'

// document.body.appendChild(Button())


/******************************** Side Effects ********************************/
/**
 * 相当于引用了 components/index.js 文件，这里只希望使用 button 组件
 * 但是 components/index.js 文件载入了好几个模块，因此文件中其他模块都会被加载
 */
import { Button } from './components'

// 样式文件属于副作用模块
import './global.css'

// 副作用模块，由于 extend 没有导出成员，因此只引用即可
import './extend'
// 现在可以直接使用 extend 文件中的扩展方法了
console.log((8).pad(3))

document.body.appendChild(Button())

